<template>
	<view class='catalogue'>
		<u-collapse
		    :border='false'
		>
			<u-collapse-item 
				v-for='item in bizCourseChapters'
				:key='item.id'
				:title='item.chapterName'
			>
				<view 
					class='collapse-item'
					v-for='child in item.children'
					:key='child.id'
				>
					<text class='item-icon'>视频</text>
					<text class='item-title'>{{ child.chapterName }}</text>
					<view class="item-see">
						<u-icon class='book' name="lock-fill" color="#606266" size="20"></u-icon>
					</view>
				</view>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script>
export default{
	props:{
		bizCourseChapters:{
			type:Array,
			default:[]
		}
	}
}
</script>

<style scoped>
.catalogue{
	padding:0 20rpx;
	box-sizing: border-box;
}
.collapse-item{
	width:100%;
	height: 90rpx;
	display: flex;
	align-items: center;
}
.item-icon{
	padding:5rpx;
	margin:0 20rpx;
	border:1px solid #333740;
	font-size: 21rpx;
	font-weight: 400;
	border-radius: 5rpx;
}
.item-title{
	flex:1;
	font-size:28rpx;
	font-weight: 400;
	margin-left:20rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.item-see{
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>